<template>
	<view class="task">
		<view class="block">
			<view class="item">
				<view class="title">填表日期</view>
				<picker class="content arrow" mode="date" fields="day" :value="dataObj.reg_date" @change="selectDateChange">
					<text>{{dataObj.reg_date}}</text>
				</picker>
			</view>
		</view>
		<view class="block">
			<view class="item">
				<view class="title">姓名</view>
				<input class="content" v-model="dataObj.name" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">身份证号码</view>
				<input class="content" v-model="dataObj.identity_id" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">文化程度</view>
				<input class="content" v-model="dataObj.stu_grade" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">身体状况</view>
				<input class="content" v-model="dataObj.body_status" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">单位全称</view>
				<input class="content" v-model="dataObj.company_name" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">单位电话</view>
				<input class="content" v-model="dataObj.compnay_phone" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">联系方式</view>
				<input class="content" v-model="dataObj.mobile" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">邮编</view>
				<input class="content" v-model="dataObj.postcode" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">通讯地址</view>
				<input class="content" v-model="dataObj.real_address" placeholder="请输入" />
			</view>
		</view>
		<view class="t-title">操作资格认定种类</view>
		<view class="block">
			<view class="b-title">新申请</view>
			<view class="item">
				<view class="title">申请作业类别</view>
				<picker class="content arrow" mode="selector" :value="pageObj.applyTypeIndex" :range="selectObj.applyType" range-key="name" @change="selectTypeChange">
					<text>{{selectObj.applyType[pageObj.applyTypeIndex]['name']}}</text>
				</picker>
			</view>
			<view class="item">
				<view class="title">申请作业项目</view>
				<picker class="content arrow" mode="selector" :value="pageObj.applyWorkIndex" :range="selectObj.applyWork" range-key="name" @change="selectWorkChange">
					<text>{{selectObj.applyWork[pageObj.applyWorkIndex]['name']}}</text>
				</picker>
			</view>
		</view>
		<view class="block">
			<view class="item">
				<view class="title">申请作业类别</view>
				<picker class="content arrow" mode="selector" :value="pageObj.applyAgainTypeIndex" :range="selectObj.applyType" range-key="name" @change="selectAgainTypeChange">
					<text>{{selectObj.applyType[pageObj.applyAgainTypeIndex]['name']}}</text>
				</picker>
			</view>
			<view class="item">
				<view class="title">申请作业项目</view>
				<picker class="content arrow" mode="selector" :value="pageObj.applyAgainWorkIndex" :range="selectObj.applyWork" range-key="name" @change="selectAgainWorkChange">
					<text>{{selectObj.applyWork[pageObj.applyAgainWorkIndex]['name']}}</text>
				</picker>
			</view>
			<view class="b-title">复审换证</view>
			<view class="item">
				<view class="title">初次领证日期</view>
				<picker class="content arrow" mode="date" fields="day" :value="dataObj.apply_first_time" @change="selectFirstTimeApplyChange">
					<text>{{dataObj.apply_first_time}}</text>
				</picker>
			</view>
			<view class="item">
				<view class="title">证书编号</view>
				<input class="content" v-model="dataObj.pertid_for_apply" placeholder="请输入" />
			</view>
			<view class="item">
				<view class="title">上次复审日期</view>
				<picker class="content arrow" mode="date" fields="day" :value="dataObj.last_time_apply" @change="selectlastTimeApplyChange">
					<text>{{dataObj.last_time_apply}}</text>
				</picker>
			</view>
			<view class="item">
				<view class="title">原发证机关</view>
				<input class="content" v-model="dataObj.pert_prover" placeholder="请输入" />
			</view>
		</view>
		<view class="footer" @click="onPostTap">
			<view class="btn">提交</view>
		</view>
	</view>
</template>

<script>
	import { getInfoData, requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					applyTypeIndex: 0,
					applyAgainTypeIndex: 0,
					applyWorkIndex: 0,
					applyAgainWorkIndex: 0,
				},
				selectObj: {
					applyType: [{
						id: 0,
						name: '请选择'
					}],
					applyWork: [{
						id: 0,
						name: '请选择'
					}]
				},
				dataObj: {
					reg_date: '', // 提交日期（以时间戳格式提交）
					form_type: '', // 表格类型，1：表一   2：表二
					avatar: '', // 头像
					name: '', // 姓名
					birthday: '', // 出生日期
					sex: 0, // 性别   1：男   2：女
					nation: '', // 民族
					stu_grade: '', // 文化程度
					identity_id: '', // 身份证
					mobile: '', // 手机
					belong_gd: 0, // 是否广东户籍,   1:是   2：否
					belong_gd_sb: 0, // 是否广东社保 ， 1:是   2：否
					hkxz: '', // 户口性质
					sbk_address: '', // 社保卡地址
					hk_address: '', // 户籍地址
					company_name: '', // 单位名称
					compnay_phone: '', // 单位电话
					pert: '', // 现有证书
					get_pert_time: '', // 考证时间
					intention_work: '', // 报名参加的工作
					body_status: '', // 身体状况
					postcode: '', // 邮政编码
					real_address: '', // 通讯地址
					apply_type: 0, // 申请作业类别
					apply_work: 0, // 申请作业项目
					apply_type_again: '', // 复审作业类别
					apply_work_again: '', // 复审作业项目
					apply_first_time: '', // 初次申领时间
					last_time_apply: '', // 上次申领时间
					pertid_for_apply: '', // 证书编号
					pert_prover: '', // 发证机关
				}
			}
		},
		onLoad() {
			this.getWorkTypes(); // 获取数据
			this.getWorks(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getWorkTypes(); // 获取数据
			this.getWorks(); // 获取数据
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 日期选择
			selectDateChange(res) {
				this.dataObj['reg_date'] = res.detail.value;
			},
			// 申请作业类别
			selectTypeChange(res) {
				const index = res.detail.value;
				this.pageObj['applyTypeIndex'] = index;
				this.dataObj['apply_type'] = this.selectObj['applyType'][index]['id'];
			},
			// 申请作业项目
			selectWorkChange(res) {
				const index = res.detail.value;
				this.pageObj['applyWorkIndex'] = index;
				this.dataObj['apply_work'] = this.selectObj['applyWork'][index]['id'];
			},
			// 申请作业类别(复)
			selectAgainTypeChange(res) {
				const index = res.detail.value;
				this.pageObj['applyAgainTypeIndex'] = index;
				this.dataObj['apply_type_again'] = this.selectObj['applyType'][index]['id'];
			},
			// 申请作业项目(复)
			selectAgainWorkChange(res) {
				const index = res.detail.value;
				this.pageObj['applyAgainWorkIndex'] = index;
				this.dataObj['apply_work_again'] = this.selectObj['applyWork'][index]['id'];
			},
			// 日期选择
			selectFirstTimeApplyChange(res) {
				this.dataObj['apply_first_time'] = res.detail.value;
			},
			// 日期选择
			selectlastTimeApplyChange(res) {
				this.dataObj['last_time_apply'] = res.detail.value;
			},
			// 提交
			onPostTap() {
				let pData = this.dataObj;
				pData['form_type'] = 2;
				this.$Requset({
					url: this.$Api['user']['report'],
					data: {
						token: uni.getStorageSync('token'),
						formData: pData
					},
					success: (res) => {
						const { data, status, msg } = res;
						requestErrorTip('toast', msg);
						if (!status) {
							return;
						}
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取作业项目类别
			getWorkTypes() {
				this.$Requset({
					url: this.$Api['user']['getWorkTypes'],
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.selectObj['applyType'] = this.selectObj['applyType'].concat(data)
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取作业项目
			getWorks() {
				this.$Requset({
					url: this.$Api['user']['getWorks'],
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.selectObj['applyWork'] = this.selectObj['applyWork'].concat(data)
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.task{
		padding-top: 18rpx;
		padding-bottom: 1rpx;
		.block{
			padding: 0 0 0 36rpx;
			.b-title{
				position: relative;
				line-height: 40rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #1A1A1A;
				padding: 32rpx 27rpx 10rpx;
				&::before{
					content: '';
					position: absolute;
					top: 45rpx;
					left: 0;
					height: 12rpx;
					width: 12rpx;
					background-color: $color-common;
					border-radius: 50%;
				}
			}
		}
		.t-title{
			line-height: 45rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;
			padding: 18rpx 36rpx;
		}
		.item{
			position: relative;
			display: flex;
			height: 40rpx;
			padding: 32rpx 0 32rpx 0;
			border-bottom: 1rpx solid #EAEFF1;
			&:nth-last-child(1){
				border-bottom: none;
			}
			.title{
				width: 200rpx;
				line-height: 40rpx;
				font-size: 30rpx;
				color: #1A1A1A;
			}
			.long{
				width: 320rpx;
			}
			.content{
				flex: 1;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				text-align: right;
				color: #7F7F7F;
				padding-right: 36rpx;
			}
			.arrow{
				position: relative;
				padding-right: 76rpx;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -15rpx;
					right: 36rpx;
					width: 30rpx;
					height: 30rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					background-image: url(../../../static/images/common/arrow-right.png);
				}
			}
		}
		.footer{
			padding: 20rpx 36rpx;
			background-color: #fff;
			.btn{
				height: 70rpx;
				line-height: 70rpx;
				font-size: 30rpx;
				color: #fff;
				background-color: $color-common;
				text-align: center;
				border-radius: 35rpx;
			}
		}
	}
</style>
